"use client";

interface EmotionResultProps {
  result: {
    predicted_emotion: string;
    confidence: number;
    probabilities: Record<string, number>;
    processing_time: number;
    filename: string;
  };
}

/**
 * 情感识别结果展示组件
 * 功能：展示预测的情感类别、置信度和详细概率分布
 * 参数：识别结果对象
 * 使用场景：向用户展示音频情感识别的结果
 */
export default function EmotionResult({ result }: EmotionResultProps) {
  // 情感标签中文映射 - RAVDESS完整情感集
  const emotionLabels: Record<string, string> = {
    neutral: "中性",
    calm: "平静",
    happy: "快乐",
    sad: "悲伤",
    angry: "愤怒",
    fearful: "恐惧",
    disgust: "厌恶",
    surprised: "惊讶"
  };

  // 情感对应的颜色和表情符号
  const emotionStyles: Record<string, { color: string; emoji: string; bgColor: string }> = {
    neutral: { color: "text-gray-600", emoji: "😐", bgColor: "bg-gray-100 dark:bg-gray-700" },
    calm: { color: "text-green-600", emoji: "😌", bgColor: "bg-green-100 dark:bg-green-900/30" },
    happy: { color: "text-yellow-600", emoji: "😊", bgColor: "bg-yellow-100 dark:bg-yellow-900/30" },
    sad: { color: "text-blue-600", emoji: "😢", bgColor: "bg-blue-100 dark:bg-blue-900/30" },
    angry: { color: "text-red-600", emoji: "😠", bgColor: "bg-red-100 dark:bg-red-900/30" },
    fearful: { color: "text-purple-600", emoji: "😨", bgColor: "bg-purple-100 dark:bg-purple-900/30" },
    disgust: { color: "text-brown-600", emoji: "🤢", bgColor: "bg-yellow-200 dark:bg-yellow-900/40" },
    surprised: { color: "text-orange-600", emoji: "😲", bgColor: "bg-orange-100 dark:bg-orange-900/30" }
  };

  const predictedEmotion = result.predicted_emotion;
  const emotionStyle = emotionStyles[predictedEmotion] || emotionStyles.neutral;

  /**
   * 获取置信度对应的颜色类
   */
  const getConfidenceColor = (confidence: number): string => {
    if (confidence >= 0.8) return "text-green-600";
    if (confidence >= 0.6) return "text-yellow-600";
    return "text-red-600";
  };

  /**
   * 获取置信度描述
   */
  const getConfidenceDescription = (confidence: number): string => {
    if (confidence >= 0.8) return "高置信度";
    if (confidence >= 0.6) return "中等置信度";
    return "低置信度";
  };

  return (
    <div className="space-y-6">
      {/* 主要结果展示 */}
      <div className={`${emotionStyle.bgColor} rounded-lg p-6 text-center`}>
        <div className="text-6xl mb-4">{emotionStyle.emoji}</div>
        <h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
          识别结果：{emotionLabels[predictedEmotion] || predictedEmotion}
        </h3>
        <div className="flex items-center justify-center space-x-2 mb-2">
          <span className="text-lg font-medium text-gray-700 dark:text-gray-300">置信度：</span>
          <span className={`text-xl font-bold ${getConfidenceColor(result.confidence)}`}>
            {(result.confidence * 100).toFixed(1)}%
          </span>
          <span className={`text-sm ${getConfidenceColor(result.confidence)}`}>
            ({getConfidenceDescription(result.confidence)})
          </span>
        </div>
        <p className="text-sm text-gray-600 dark:text-gray-400">
          处理时间：{result.processing_time}秒
        </p>
      </div>

      {/* 详细概率分布 */}
      <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
        <h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
          各情感概率分布
        </h4>
        <div className="space-y-3">
          {Object.entries(result.probabilities)
            .sort(([, a], [, b]) => b - a) // 按概率从高到低排序
            .map(([emotion, probability]) => {
              const style = emotionStyles[emotion] || emotionStyles.neutral;
              const percentage = probability * 100;
              
              return (
                <div key={emotion} className="space-y-2">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-2">
                      <span className="text-lg">{style.emoji}</span>
                      <span className="font-medium text-gray-900 dark:text-white">
                        {emotionLabels[emotion] || emotion}
                        <span className="text-gray-500 dark:text-gray-400 ml-1">
                          ({emotion})
                        </span>
                      </span>
                    </div>
                    <span className={`font-semibold ${style.color}`}>
                      {percentage.toFixed(1)}%
                    </span>
                  </div>
                  <div className="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2">
                    <div
                      className={`h-2 rounded-full transition-all duration-500`}
                      style={{ 
                        width: `${percentage}%`,
                        backgroundColor: emotion === 'neutral' ? '#6b7280' : 
                                       emotion === 'calm' ? '#16a34a' :
                                       emotion === 'happy' ? '#eab308' :
                                       emotion === 'sad' ? '#2563eb' :
                                       emotion === 'angry' ? '#dc2626' :
                                       emotion === 'fearful' ? '#9333ea' :
                                       emotion === 'disgust' ? '#a16207' :
                                       emotion === 'surprised' ? '#ea580c' : '#6b7280'
                      }}
                    ></div>
                  </div>
                </div>
              );
            })}
        </div>
      </div>

      {/* 文件信息 */}
      <div className="bg-gray-50 dark:bg-gray-700 rounded-lg p-4">
        <h4 className="text-lg font-semibold text-gray-900 dark:text-white mb-3">
          分析详情
        </h4>
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-sm">
          <div className="flex items-center space-x-2">
            <span className="text-gray-500 dark:text-gray-400">文件名：</span>
            <span className="text-gray-900 dark:text-white font-mono">
              {result.filename}
            </span>
          </div>
          <div className="flex items-center space-x-2">
            <span className="text-gray-500 dark:text-gray-400">预测情感：</span>
            <span className="text-gray-900 dark:text-white">
              {emotionLabels[predictedEmotion]} ({predictedEmotion})
            </span>
          </div>
          <div className="flex items-center space-x-2">
            <span className="text-gray-500 dark:text-gray-400">处理时间：</span>
            <span className="text-gray-900 dark:text-white">
              {result.processing_time}秒
            </span>
          </div>
          <div className="flex items-center space-x-2">
            <span className="text-gray-500 dark:text-gray-400">算法类型：</span>
            <span className="text-gray-900 dark:text-white">
              传统机器学习
            </span>
          </div>
        </div>
      </div>

      {/* 建议信息 */}
      <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
        <div className="flex items-start space-x-2">
          <span className="text-blue-500 text-lg">💡</span>
          <div className="text-sm text-blue-700 dark:text-blue-300">
            <p className="font-medium mb-1">分析建议：</p>
            {result.confidence >= 0.8 ? (
              <p>置信度很高，识别结果可信度较高。</p>
            ) : result.confidence >= 0.6 ? (
              <p>置信度中等，建议结合人工判断确认结果。</p>
            ) : (
              <p>置信度较低，可能存在识别不确定性，建议重新录制更清晰的音频。</p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
} 